<template>
	<view>
		<!-- <u-navbar>
			<view class="slot-wrap">
				<view class="navitem" @click="tab(0)" :class="{'navb':tflag==0}">商品</view>
				<view class="navitem" @click="tab(1)" :class="{'navb':tflag==1}">评价</view>
				<view class="navitem" @click="tab(2)" :class="{'navb':tflag==2}">详情</view>
			</view>
		</u-navbar> -->
		<view class="content">
			<!-- 轮播图 -->
			<view class="swiperbox">
				<swiper class="swiper" autoplay="autoplay" interval="3000" circular="true" @change="changeindex">
					<swiper-item v-for="(i,t) in bannerList">
						<image :src="i.image.file_path" mode="aspectFill"></image>
					</swiper-item>

				</swiper>
				<view class="num">{{index}}/{{bannerList.length}}</view>
			</view>
			<!-- 信息 -->
			<view class="p-box">
				<view class="price">
					秒杀价 {{price}}积分
				</view>
				<view class="by">
					包邮
				</view>
				<!-- 收藏的星 -->
				<!-- <image src="../../static/icon/lick.png" class="lickimg"></image> -->
			</view>

			<view class="pname">
				{{goodsDetail.goods_name}}
			</view>
			<!-- 销量 -->
			<view class="x-box">
				<view class="x-item"><text
						style="margin-right: 20rpx;">销量</text><text>{{goodsDetail.sales_actual}}</text></view>
				<view class="x-item"><text style="margin-right: 20rpx;">库存</text><text>{{goodsDetail.stock}}</text>
				</view>
				<view class="x-item"><text style="margin-right: 20rpx;">浏览量</text><text>{{goodsDetail.views}}</text>
				</view>
			</view>
			<!-- 商品评价 -->
			<!-- <view class="pj-box">
				<text class="pinjia">商品评价</text>
				<view class="good" >
					<text>更多评价</text>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view> -->
			<!-- 评价类容 -->
			<!-- <view class="pc-box" >
				<view class="pc-item">
					<view class="pc-i-t">
						<image src="../../static/balance/arrive.png" mode="aspectFill" class="pimg"></image>
						<view class="pc-name">
							<view>名称</view>
							<u-rate :count="count" v-model="value" :disabled="true" size="28"></u-rate>
						</view>
					</view>
					<view class="pcon">
						物流很快，客服态度很好，手机好用
					</view>
					<view class="piimg-box">
						<image src="../../static/balance/arrive.png" mode="aspectFill"></image>
					</view>
					<view class="time">2020-02-03 10:20</view>
				</view>
			</view>
			<view class="allp">
				查看全部评价
			</view>
			<view class="no">暂无评价~~~</view> -->
			<!-- 店铺名称  暂时注释-->
			<!-- <view class="dp-box">
				<view class="dplogo">
					<image src="../../static/icon/lick.png" mode="aspectFill" class="logo"></image>
					<view class="dptitle">一加手机六合官方旗舰店</view>
				</view>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view> -->
			<!-- 商品详情的富文本类容 -->
			<view class="gcon">商品详情</view>
			<view class="fuwenb" v-html="">
				<!-- 产品详情的富文本 -->
				<rich-text :nodes="goodsDetail.content | formatRichText"></rich-text>
			</view>
			<!-- 底部的购买按钮组 -->
			<view class="btnbox">
				<view class="btn" @click="buy">立即购买</view>
			</view>
		</view>
		<view>

		</view>
		<u-mask :show="show" @click="show = false" :z-index="1000" :duration="50">
			<view class="warp" @tap.stop>
				<view class="gebox">
					<image :src="img" mode="aspectFill" class="minimg"></image>
					<view class="r-g-box">
						<view class="gename">{{goodsDetail.goods_name}}</view>
						<view class="geprice">￥{{price}}</view>
					</view>
					<view></view>
				</view>
				<view class="guigebox" v-for="(item,index) in guigelist" v-if="flag">
					<view class="guigetitle">{{item.group_name}}</view>
					<view class="guigeitem">
						<text class="guigeitemtitle " v-for="(it,i) in item.spec_items" :class="{'guigeitemtitlestyle':guige[index]==it.item_id}"
						 @click="xzgg(index,it.item_id)">{{it.spec_value}}</text>
					</view>
				</view>
				<!-- <view class="numbox">
					<u-number-box v-model="num" :min="1"></u-number-box>
				</view> -->
				<view class="rect" @click="buys">确定</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		goodsDetail,msproduct
	} from '../../api/product.js'
	export default {
		data() {
			return {
				flashsale: 0, //0正常商品 1 会员产品 2推荐产品积分购买  4抢购商品 5 拼团商品
				count: 5,
				value: 5,
				tflag: 0,
				goodsinfo: {},
				index: "1",
				show: false,
				num: 1, //选择的数量
				type: null, //0加入购物车 1立即购买 2发起拼团 3 单独购买
				price: "",//初始多规格金额
				guige: [], //设置初始的规格
				guigelist: [], //储存规格选项组
				xuanze: {}, //选择的规格
				flag: true,
				isShow: false,
				img: "",//初始多规格图片
				stockNum: 0, //商品库存
				yuan: '',
				groupList: [],
				id: "",
				activeId: null, //拼团id
				goods_id: '', //商品id
				goodsDetail: [], //商品详情
				bannerList: []
			}
		},
		onLoad(e) {
			if(e.ms){
				this.ms=true
				this.goods_id = e.id
				this.getmsProductDetail()
			}else{
				this.goods_id = e.id
				this.getProductDetail()
			}
			
		},
		filters: {
			formatRichText(html) { //控制小程序中图片大小
				if (html) {
					let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
						match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
							'max-width:100%;');
						return match;
					});
					newContent = newContent.replace(/<br[^>]*\/>/gi, '');
					newContent = newContent.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;display:block;margin:0 auto;"');
					return newContent;
				} else {
					return '暂无商品详情'
				}
			}
		},
		methods: {
			//得到一个值的类型
			getValueType(value) {
				var type = '';
				if (typeof value != 'object') {
					type = typeof value;
				} else {
					if (value instanceof Array) {
						type = 'array';
					} else {
						if (value instanceof Object) {
							type = 'object';
						} else {
							type = 'null';
						}
					}
				}
				return type;
			},
			// 购买
			buy() {
				if(this.Md.islogin()){
					if(this.guigelist.length>0){
						this.show=true
					}else{
						uni.navigateTo({
							url:"/pages/order/sureOrder?isms=true&skuid=0&goodsid="+this.goods_id
						})
					}
				}
			},
			buys(){
				this.show=false
				uni.navigateTo({
					url:"/pages/order/sureOrder?isms=true&skuid="+this.xuanze.id+"&goodsid="+this.goodsDetail.id
				})
			},
			getmsProductDetail() {
				this.get(msproduct, {
					id: this.goods_id
				}).then(res => {
					console.log(res)
					this.goodsDetail = res.data.product
					this.bannerList = res.data.product.images
					this.price=res.data.price
					// 是否是多规格产品
					// if(res.data.detail.spec.length>0){
					// 	this.guigelist=res.data.specData.spec_attr
					// 	this.price=res.data.detail.spec[0].goods_price
					// 	this.img=res.data.detail.spec[0].image.file_path
					// 	this.xuanze=res.data.detail.spec[0]
					// 	this.guige=res.data.detail.spec[0].spec_value.split("_")
					// }
				})
			},
			changeindex(e) {
				this.index = e.detail.current + 1
			},
			// 查看大图
			previewImage(url, arr) {
				uni.previewImage({
					current: url,
					urls: arr
				});
			},
			// 选择规格
			xzgg(index, id) {
				this.flag = false
				this.guige[index] = id
				this.goodsDetail.spec.forEach((item, i) => {
					if (item.spec_value.indexOf("_") != -1) {
						let arr = item.spec_value.split("_")
						let sort1 = arr.sort((a, b) => a - b)
						let arr1 = JSON.parse(JSON.stringify(this.guige))
						let sort2 = arr1.sort((a, b) => a - b)
						if (sort1.toString() == sort2.toString()) {
							this.xuanze = item
							this.price = item.goods_price
							this.img = item.image.file_path
							console.log(this.xuanze)
							// this.stockNum = item.stockNum
						}
					} else {
						let arr1 = JSON.parse(JSON.stringify(this.guige))
						if (item.spec_value == arr1.toString()) {
							this.xuanze = item
							this.price = item.goods_price
							this.img = item.image.file_path
							// this.stockNum = item.stockNum
						}
					}
				})
				this.flag = true
			},
			// 点击顶部页面滑动
			tab(e) {
				console.log(e)
				this.tflag = e;
				if (e == 0) {
					uni.createSelectorQuery().select('.swiperbox').boundingClientRect(data => { //目标位置节点 类或者 id 
						uni.createSelectorQuery().select(".content").boundingClientRect((res) => { //最外层盒子节点类或者 id
							uni.pageScrollTo({
								duration: 200, //过渡时间
								scrollTop: data.top - res.top - 100, //到达距离顶部的top值
							})
						}).exec()
					}).exec();
				} else if (e == 1) {
					uni.createSelectorQuery().select('.pj-box').boundingClientRect(data => { //目标位置节点 类或者 id
						uni.createSelectorQuery().select(".content").boundingClientRect((res) => { //最外层盒子节点类或者 id
							uni.pageScrollTo({
								duration: 200, //过渡时间
								scrollTop: data.top - res.top - 100, //到达距离顶部的top值
							})
						}).exec()
					}).exec();
				} else {
					uni.createSelectorQuery().select('.fuwenb').boundingClientRect(data => { //目标位置节点 类或者 id
						uni.createSelectorQuery().select(".content").boundingClientRect((res) => { //最外层盒子节点类或者 id
							uni.pageScrollTo({
								duration: 200, //过渡时间
								scrollTop: data.top - res.top - 100, //到达距离顶部的top值
							})
						}).exec()
					}).exec();
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.gcon {
		height: 66rpx;
		line-height: 66rpx;
		background-color: #F6F6F6;
		text-align: center;
		margin-top: 20rpx;
	}

	.no {
		text-align: center;
	}

	.piimg-box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.piimg-box>image {
		width: 120rpx;
		height: 120rpx;
		margin: 0 10rpx;
	}

	.guigeitemtitle {
		background-color: #999999;
		font-size: 24rpx;
		padding: 4rpx 14rpx;
		border-radius: 30rpx;
		margin: 10rpx 10rpx;
		color: #333;
	}

	.guigeitemtitlestyle {
		background-color: #F0812D !important;
		color: #FFFFFF !important;
	}

	.guigeitem {
		display: flex;
		flex-wrap: wrap;
		width: 100%;

	}

	.guigetitle {
		font-size: 26rpx;
		color: #666666;

	}

	.guigebox {
		border-bottom: 1px #999 solid;
		margin-bottom: 30rpx;
	}

	.numbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.rect {
		width: 100%;
		height: 66rpx;
		// background-image: linear-gradient(to right, #F3C44E, #ED6138);
		background-color: #06923D;
		text-align: center;
		line-height: 66rpx;
		color: #FFFFFF;
		border-radius: 100rpx;
	}

	.geprice {
		font-size: 32rpx;
		color: #F0812D;
		font-weight: bold;
	}

	.gename {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.r-g-box {
		width: 400rpx;
		height: 100%;
		margin-left: 20rpx;
	}

	.gebox {
		display: flex;
		height: 200rpx;
		align-items: center;
	}

	.minimg {
		width: 160rpx;
		height: 160rpx;
		position: relative;
		top: -60rpx;
		border-radius: 20rpx;
	}

	.warp {
		width: 100%;
		padding: 0 40rpx 40rpx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
	}

	/* 拼团信息 */
	.spell-box {
		width: 100%;
		background: #fff;

		// view {
		// 	display: inline-block;
		// 	vertical-align: top;
		// }
		.spell-title {
			width: 100%;
			border-bottom: 1px solid #f1f3f6;
			line-height: 32px;
			display: flex;
			align-items: center;

			.spell-left {
				width: 25%;
				padding-left: 4%;
				font-size: 28rpx;
				font-weight: bold;
			}

			.spell-center {
				width: 52%;
				font-size: 28rpx;
				font-weight: bold;
			}

			.spell-right {
				width: 23%;
				text-align: center;
				color: #F0812D;
				font-weight: bold;
			}
		}

		.spell-content {
			width: 100%;
			height: 40px;
			display: flex;
			align-items: center;

			.spell-left {
				width: 30%;
				padding-left: 4%;
				overflow-x: auto;

				image {
					height: 50rpx;
					margin: 8px 0 0;
					width: 50rpx;
					border-radius: 100%;
				}
			}

			.time-box {
				width: 40%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 40rpx;
				height: 100%;
			}

			.spell-center {
				width: 20%;
				line-height: 40px;
				font-size: 14px;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);

			}

			.spell-right {
				width: 23%;
				text-align: center;
				height: 100%;

				view {
					width: 100rpx;
					line-height: 26px;
					color: #fff;
					background-image: linear-gradient(to right, #F3C44E, #ED6138);
					margin-top: 7px;
					font-size: 12px;
					border-radius: 8px;
					padding: 0 5px;
				}
			}
		}
	}

	.juli {
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.ago {
		font-size: 24rpx;
		font-weight: 400;
		color: #D6D6D6;
	}

	.after {
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.seckill_price {
		width: 490rpx;
		padding-left: 10rpx;
	}

	.pseckill_price {
		width: 490rpx;
		padding-left: 10rpx;
		display: flex;
		align-items: center;
	}

	.seckill {
		height: 88rpx;
		border-radius: 28rpx;
		background-color: #013A94;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 50rpx;
	}

	.btn {
		color: #FFFFFF;
		font-size: 26rpx;
		height: 60rpx;
		width: 152rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 60rpx;
		margin-right: 30rpx;
		background-color: #06923D;
	}

	.btnbox {
		width: 750rpx;
		height: 90rpx;
		background: #F6F6F6;
		opacity: 1;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.navb::after {
		content: "";
		width: 80rpx;
		height: 4rpx;
		background-color: #06923D;
		position: absolute;
		bottom: 0;
		left: -10rpx;
	}

	.fuwenb {}

	.dptitle {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 42px;
		color: #333333;
		opacity: 1;

	}

	.dplogo {
		display: flex;
		align-items: center;
		height: 70rpx;
	}

	.dp-box {
		width: 690rpx;
		height: 70rpx;
		margin: 40rpx auto 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.logo {
		width: 65rpx;
		height: 65rpx;
		border-radius: 65rpx;
		margin-right: 10rpx;
	}

	.allp {
		width: 241rpx;
		height: 60rpx;
		border: 1px solid #707070;
		opacity: 1;
		border-radius: 41rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 60rpx;
		color: #333333;
		opacity: 1;
		margin: auto;
		text-align: center;

	}

	.time {
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 300;
		line-height: 33rpx;
		color: #666;
		opacity: 1;
		margin-top: 20rpx;

	}

	.pcon {
		max-height: 66rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		color: #333333;
		opacity: 1;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */

	}

	.content {
		padding-bottom: 100rpx;
	}

	.pimg {
		width: 60rpx;
		height: 60rpx;
		background: rgba(0, 0, 0, 0);
		border-radius: 50%;
		opacity: 1;
		margin-right: 20rpx;

	}

	.pc-name {
		font-size: 24rpx;
		color: #666666;
	}

	.pc-item {
		width: 690rpx;
		margin: 0 auto 30rpx;
	}

	.pc-i-t {
		display: flex;
		align-items: center;
		height: 80rpx;
	}

	.good {
		font-size: 26rpx;
		line-height: 37px;
		color: #999999;

	}

	.pinjia {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;

	}

	.pj-box {
		width: 690rpx;
		height: 40rpx;
		margin: 20rpx auto 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.x-box {
		width: 690rpx;
		height: 40rpx;
		margin: 20rpx auto 30rpx;
		display: flex;
		justify-content: space-between;
		color: #666666;
	}

	.x-item {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #666666;
	}

	.pname {
		width: 690rpx;
		height: 90rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 45rpx;
		color: #000000;
		opacity: 1;
		margin: auto;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */

	}

	.by {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #999;
		padding: 4rpx 10rpx;
		border-radius: 40rpx;
		margin-left: 40rpx;
		border: 1px #999 solid;
	}

	.lickimg {
		width: 24rpx;
		height: 20rpx;
		position: absolute;
		right: 40rpx;
	}

	.price {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #06923D;
		opacity: 1;

	}

	.p-box {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.num {
		position: absolute;
		right: 40rpx;
		bottom: 40rpx;
		background-color: rgba(0, 0, 0, 0.7);
		color: #FFFFFF;
		padding: 4rpx 10rpx;
		border-radius: 30rpx;
		line-height: 24rpx;
		font-size: 24rpx;
	}

	swiper-item {
		width: 750rpx;
		height: 750rpx;
	}

	swiper-item>image {
		width: 750rpx;
		height: 750rpx;
	}

	.swiper {
		width: 750rpx;
		height: 750rpx;
	}

	.swiperbox {
		width: 750rpx;
		height: 750rpx;
		position: relative;
	}

	.slot-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 500rpx;
		margin: auto;
		padding-right: 80rpx;
		position: relative;
	}

	.navitem {
		margin: 0 20rpx;
		padding: 20rpx 0;
		height: 100%;
		font-size: 28rpx;
		font-weight: bold;
		position: relative;
	}

	.cart {
		position: absolute;
		right: 0;
		right: -40rpx;
	}
</style>
